﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="js/v5.1.3-dist/ol.css" rel="stylesheet" type="text/css" />
    <script src="js/v5.1.3-dist/ol.js" type="text/javascript"></script>
    <script src="js/custom/control/ToolBar.js" type="text/javascript"></script>
    <link href="css/example.css" rel="stylesheet" />
    <script src="js/InitMap.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            //实例化地图视图对象
            var view = new ol.View({
                center: [12950000, 4860000],
                zoom: 7
            });

            var baseLayer = new ol.layer.Tile({
                title: "base",
                source: new ol.source.OSM()
            });
            var filter = "";
            var grayscale = 0;
            var sepia = 0;
            var saturate = 0;
            var hueRotate = 0;
            var invert = 0;
            var opacity = 0;
            var brightness = 0;
            var contrast = 0;
            var blur = 0;
            var dropShadow = 0;

            /**
            * @link {https://www.runoob.com/cssref/css3-pr-filter.html}
            *1　  grayscale灰度
            *2　　sepia褐色（有种复古的旧照片感觉）
            *3　　saturate饱和度
            *4　　hue-rotate色相旋转
            *5　　invert反色
            *6　　opacity透明度
            *7　　brightness亮度
            *8　　contrast对比度
            *9　　blur模糊
            *10　　drop-shadow阴影
            */
            baseLayer.on('postcompose', function (event) {
                event.context.filter = filter;
            });


            //实例化地图对象
            var map = new ol.Map({
                target: 'map',
                layers: [
                    baseLayer
                ],
                loadTilesWhileAnimating: true,
                view: view
            });

            refresh();


            new ToolBar(document.getElementById("toolbar")).addMenus([

                {
                    name: "grayscale", menuType: ToolBar.MenuType.RANGE, minValue: 0, maxValue: 100, step: 1, defaultValue: grayscale, onchange:
                        function (event) {
                            grayscale = event.currentTarget.value;
                            refresh();
                        }
                },
                {
                    name: "sepia", menuType: ToolBar.MenuType.RANGE, minValue: 0, maxValue: 100, step: 1, defaultValue: sepia, onchange:
                        function (event) {
                            sepia = event.currentTarget.value;
                            refresh();
                        }
                },
                {
                    name: "saturate", menuType: ToolBar.MenuType.RANGE, minValue: 0, maxValue: 100, step: 1, defaultValue: saturate, onchange:
                        function (event) {
                            saturate = event.currentTarget.value;
                            refresh();
                        }
                },
                {
                    name: "hueRotate", menuType: ToolBar.MenuType.RANGE, minValue: 0, maxValue: 100, step: 1, defaultValue: hueRotate, onchange:
                        function (event) {
                            hueRotate = event.currentTarget.value;
                            refresh();
                        }
                },
                {
                    name: "invert", menuType: ToolBar.MenuType.RANGE, minValue: 0, maxValue: 100, step: 1, defaultValue: invert, onchange:
                        function (event) {
                            invert = event.currentTarget.value;
                            refresh();
                        }
                },
                {
                    name: "opacity", menuType: ToolBar.MenuType.RANGE, minValue: 0, maxValue: 100, step: 1, defaultValue: opacity, onchange:
                        function (event) {
                            opacity = event.currentTarget.value;
                            refresh();
                        }
                },
                {
                    name: "brightness", menuType: ToolBar.MenuType.RANGE, minValue: 0, maxValue: 100, step: 1, defaultValue: brightness, onchange:
                        function (event) {
                            brightness = event.currentTarget.value;
                            refresh();
                        }
                },
                {
                    name: "contrast", menuType: ToolBar.MenuType.RANGE, minValue: 0, maxValue: 100, step: 1, defaultValue: contrast, onchange:
                        function (event) {
                            contrast = event.currentTarget.value;
                            refresh();
                        }
                },
                {
                    name: "blur", menuType: ToolBar.MenuType.RANGE, minValue: 0, maxValue: 100, step: 1, defaultValue: blur, onchange:
                        function (event) {
                            blur = event.currentTarget.value;
                            refresh();
                        }
                },
                {
                    name: "dropShadow", menuType: ToolBar.MenuType.RANGE, minValue: 0, maxValue: 100, step: 1, defaultValue: dropShadow, onchange:
                        function (event) {
                            dropShadow = event.currentTarget.value;
                            refresh();
                        }
                }

            ]);

            function refresh() {
                filter = "";

                filter += blur == 0 ? "" : "blur(" + blur + "px)";

                filter += brightness == 0 ? "" : " brightness(" + brightness + "%)";
                filter += contrast == 0 ? "" : "contrast(" + contrast + "%)";
                filter += grayscale == 0 ? "" : "grayscale(" + grayscale + "%)";
                filter += hueRotate == 0 ? "" : " hue-rotate(" + hueRotate + "deg)";
                filter += invert == 0 ? "" : " invert(" + invert + "%)";
                filter += opacity == 0 ? "" : " opacity(" + opacity + "%)";
                filter += saturate == 0 ? "" : " saturate(" + saturate + "%)";
                filter += sepia == 0 ? "" : " sepia(" + sepia + "%)";
                map.render();
                console.log(filter);
            }
        };

    </script>
</head>
<body>
    <div id="toolbar" style="position: absolute; z-index: 10; background: rgba(42, 42, 42, 0.8);
        padding: 4px; border-radius: 4px; margin: 5px; color: #fff; font-size: 14px;
        font-family: 微软雅黑;">
    </div>
    <div id="map">
    </div>
</body>
</html>
